<!--
 * @Description: 资源管理---运维资源---购买记录
 * @Author: 魏勇
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2020-03-31 18:16:32
 * @LastEditors: 魏勇
 -->
<template>
    <div class="dataDic" style="height: 480px;background-color: #FFF">
        <el-col :span="14" >
            <!--        表格-->
            <el-row >
                <el-table-ctl :selectBox="false" @rowClick="rowClick" :datas="datas" :params="queryParams" :maxHeight="maxHeight" ref="tableObj" :cols="cols"></el-table-ctl>
            </el-row>
        </el-col>

        <el-col :span="10" style="background-color: #EDF0F6;height: 480px;padding: 10px 15px;overflow: auto;">
            <el-row><span class="panel-title" style="padding-left: 12px;">购买详情</span></el-row>
            <dynamicFormList   ref="dynamicForList"
                             :items="formCols"></dynamicFormList>
        </el-col>

    </div>
</template>

<script>

    import elTableCtl from "./el-table-ctl";
    import dynamicListForm from './dynamicListForm';
    import dynamicFormList from './dynamicFormList';
    import purchaseDomain,{_getCloneCols} from '../data/purchaseDomain';
    import {changeDbFieldToJson} from '../data/domainCols.js';
    import { Loading } from 'element-ui';
    let loadingIns=null;


    export default {
        name: "purchaseRecords",
        components: {
            elTableCtl,
            dynamicListForm,
            dynamicFormList,
        },
        props:{
            tabType:{type:[String,Number],default:''},
            formCols:{type:Array,default:()=>[]}
        },
        computed: {},
        data(){
            return {
                datas:[],
                queryParams:{instanceType:this.tabType},
                maxHeight:400,
                cols:_getCloneCols(purchaseDomain),
                mode:"list",
            }
        },
        methods: {
            //记录点击
            rowClick({row}){
                this.mode = "list";
                this.operationLabel="查看";
                this.loadRecord(row["name"]);
            },
            //查询列表信息
            searchGridByCondition(resourceName) {
                this.$refs.tableObj.flushGridByUrl("instanceLog", {
                    method: "get", customRequest: true, dataFun: (list) => {
                        let recordJsonAry = [];
                        list.forEach((itemObj, index) => {
                            recordJsonAry.push(itemObj);
                        });
                        this.datas=recordJsonAry;
                    }
                }, {resourceName});
            },
            //加载购买详情数据
            loadRecord(detailId){
                loadingIns = Loading.service({text:"加载中"});
                this.api.getCommonTenantResourceById({params: {id:detailId}}, {method: "get", customRequest: true})
                    .then(res => {
                        changeDbFieldToJson.call(this, res);
                        loadingIns.close();
                    })
                    .catch(err => {
                        console.warn(err.msg)
                    });
            }
        },
        created() {

        },
        mounted() {
            //加载数据
            this.searchGridByCondition("");
        },
        watch: {

        }
    };
</script>
